<!-- <template>
    <div
        ref="myChart"
        id="myChart"
        :style="{ width: '800px', height: '600px' }"
    ></div>
</template>

<script>
import { color } from 'echarts';
import { getCurrentInstance, onMounted } from 'vue';

export default {
    setup() {
        // 通过 internalInstance.appContext.config.globalProperties 获取全局属性或方法
        let internalInstance = getCurrentInstance();
        let echarts =
            internalInstance.appContext.config.globalProperties.$echarts;

        onMounted(() => {
            const dom = document.getElementById('myChart');
            const myChart = echarts.init(dom); // 初始化echarts实例
            const option = {
                // 设置背景色
                backgroundColor: 'rgba(8, 22, 34, 1)',

                title: {
                    text: '节水器安装率',
                    subtext: '',
                    left: 'left',
                    top: 5, // 定位
                    left: 10,
                    // 定位
                    textStyle: {
                        color: '#00FFFF',
                        fontSize: 20
                    },
                    subtextStyle: {
                        // 副标题样式
                        color: '#00FFFF',
                        fontSize: 16
                    }
                },

                //  图表距边框的距离,可选值：'百分比'¦ {number}（单位px）
                grid: {
                    top: '15%',
                    left: '3%',
                    right: '8%',
                    bottom: '3%',
                    containLabel: true
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{b} : {c} ({d}%)'
                },

                legend: {
                    orient: 'vertical',
                    x: 'right',
                    data: ['节水器具安装率', '非节水器具安装率'],
                    textStyle: {
                        color: 'white'
                    }
                },
                series: [
                    {
                        radius: '70%',
                        type: 'pie',
                        label: {
                            show: true,
                            position: 'outside',
                            color: 'white',
                            fontSize: '15',
                            fontWeight: 'bold',
                            borderRadius: 10, //弧度
                            formatter: '{b}:{d}%',
                            padding: [15, 10] //设置外部文字的位置
                        },
                        labelLine: {
                            show: true,
                            length: 22,
                            lineStyle: {
                                width: 2,
                                type: 'solid'
                            },
                            minTurnAngle: 10
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 50,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        data: [
                            {
                                value: 222,
                                name: '节水器具安装率',
                                itemStyle: { color: '#00FFFF' }
                            },
                            {
                                value: 931,
                                name: '非节水器具安装率',
                                itemStyle: { color: '#FFFF00' }
                            }
                        ]
                    }
                ]
            };
            // 设置实例参数
            myChart.setOption(option);
        });
        return {};
    }
};
</script> -->

<template>
    <div>
        <iframe
            src="http://1.95.13.110:8082/#/evaluation/show1"
            frameborder="0"
            class="iframe"
        >
        </iframe>
    </div>
</template>

<script setup lang="ts"></script>

<style scoped>
.iframe {
    width: 100%;
    height: 100vh;
    position: absolute;
    z-index: 0;
    top: 0px;
}
</style>
